<md-dialog w-i18n-ns="app.utils" class="terms-accept" aria-label="modal">
    <w-step-by-step active-step="0">
        <w-step class="step-1">
            <md-dialog-content>
                <div class="header-texts">
                    <h1 w-i18n="modal.termsAccept.header.title"></h1>
                    <div class="margin-05 body-2 basic-500" w-i18n="modal.termsAccept.header.description"></div>
                </div>

                <hr class="hr">

                <div class="row">
                    <w-checkbox-submit id="securityAndBackup" ng-model="$ctrl.securityAndBackup"></w-checkbox-submit>
                    <label for="securityAndBackup" w-i18n="modal.termsAccept.body.securityAndBackup"></label>
                </div>

                <div class="row">
                    <w-checkbox-submit id="readTermsAndConditions" ng-model="$ctrl.readTermsAndConditions"></w-checkbox-submit>
                    <label for="readTermsAndConditions" w-i18n="modal.termsAccept.body.readTermsAndConditions"></label>
                </div>

                <div class="row">
                    <w-checkbox-submit id="privacyPolicy" ng-model="$ctrl.privacyPolicy"></w-checkbox-submit>
                    <label for="privacyPolicy" w-i18n="modal.termsAccept.body.privacyPolicy"></label>
                </div>

                <w-button class="submit long big" on-click="$ctrl.confirm()"
                          disabled="!$ctrl.securityAndBackup || !$ctrl.readTermsAndConditions || !$ctrl.privacyPolicy">
                    <span w-i18n="modal.termsAccept.body.ok"></span>
                </w-button>
            </md-dialog-content>
        </w-step>
    </w-step-by-step>
</md-dialog>
